<template>
    <div class="radio-box">
        <div class="radio">
            <input :id="`radio${id}`" :name="radioName" type="radio" />
            <label :for="`radio${id}`"></label>
            <!-- <div class="radio-label">radio-label</div> -->
        </div>
        <label :for="`radio${id}`" class="radio-label">radio-label</label>
    </div>
</template>
<script>
import { toRefs } from 'vue';
export default {
    props: {
        id: {
            type: String || Number,
            default: 'radio-usb',
        },
        radioName: {
            type: String || Number,
            default: 'radioName',
        },
    },
    setup(props, context) {
        const { id, radioName } = toRefs(props);
        return { id, radioName };
    },
};
</script>
<style lang="less">
.radio-box {
    display: inline-flex;
}
.radio input {
    display: none;
}

.radio {
    // width: 6rem;
    padding: 0 1.5rem;
    display: flex;
    justify-content: center;
}

.radio label {
    box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    width: 2.8rem;
    height: 2.8rem;
    margin: 0 8px;
    &::after {
        content: '';
        position: absolute;
        width: 40%;
        height: 40%;
        top: 50%;
        left: 50%;
        border-radius: 4px;
        transform: translate(-50%, -50%);
        background-color: #9baacf;
        transition: 0.3s ease;
    }
    &:hover {
        &::after {
            background-color: #2ebb96;
        }
    }
}
.radio-label {
    line-height: 2.8rem;
    height: 2.8rem;
    font-size: 1.5rem;
    cursor: pointer;
}

.radio input:checked ~ label {
    box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff;
}

.radio input:checked ~ label {
    &::after {
        background-color: #2ebb96;
    }
}
</style>
